<template>
  <div @click.self="closeMask" class="x-house" :style="{ height: `${deviceH}px` }">
    <div
      v-if="isShowCtx == '1'"
      class="house-ctx"
      :style="{ 'background-image': `url(${modelBg})` }"
    >
      <div class="ctx-title">{{ name.name }}</div>
      <div class="ctx-info">
        <div class="info-item" style="flex:4">
          <div class="item-rs">
            <div class="rs-content">
              <div class="content-name">
                <span>
                  <img
                    data-v-cff0e4ae
                    src=""
                    class="pic"
                  />
                  业主自住
                </span>
              </div>
              <div class="content-number">
                <span>{{ liveSun.itmes[0].value }}</span>
                <span class="unit">套</span>
              </div>
            </div>
            <div class="rs-content">
              <div class="content-name">
                <span>
                  <img
                    data-v-cff0e4ae
                    src=""
                    class="pic"
                  />
                  空置房屋
                </span>
              </div>
              <div class="content-number">
                <span>{{ liveSun.itmes[3].value }}</span>
                <span class="unit">套</span>
              </div>
            </div>
          </div>
          <div class="item-rs">
            <div class="rs-content">
              <div class="content-name">
                <span>
                  <img
                    data-v-cff0e4ae
                    src=""
                    class="pic"
                  />
                  出租房屋
                </span>
              </div>
              <div class="content-number">
                <span>{{ liveSun.itmes[1].value }}</span>
                <span class="unit">套</span>
              </div>
            </div>
            <div class="rs-content">
              <div class="content-name">
                <span>
                  <img
                    data-v-cff0e4ae
                    src=""
                    class="pic"
                  />
                  群租房屋
                </span>
              </div>
              <div class="content-number">
                <span>{{ liveSun.itmes[2].value }}</span>
                <span class="unit">套</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="info-item">
          <div class="item-name">{{ ageSum.resultname }}</div>
          <div class="item-pie">
            <x-pie v-if="ageSum.itmes.length" id="ageSum" :data="ageSum.itmes" mapType="ageSum"/>
          </div>
        </div> -->
        <div class="info-item" style="flex:3">
          <div class="item-name">{{ liveSun.resultname }}</div>
          <div class="item-pie">
            <x-pie v-if="liveSun.itmes.length" id="liveSun"  :data="liveSun.itmes" />
          </div>
        </div>
         <div class="info-item" style="flex:4">
           <div class="item-name">物联设备</div>
           <div  class="info_icon" >
             <div @click="showwulian('menjin')">
               <div class="img"><img src="../../assets/images/icon_menjin.png" alt=""></div>
               <div style="margin-top:16px">单元楼</div>
               <div>人脸门禁</div>
             </div>
             <div @click="showwulian('renlian')">
               <div class="img"><img src="../../assets/images/icon_zhuapai.png" alt=""></div>
               <div style="margin-top:26px">单元楼</div>
               <div>人脸抓拍</div>
             </div>
             <div>
               <div class="img"><img src="../../assets/images/icon_dianti.png" alt=""></div>
               <div style="margin-top:30px;">电梯监控</div>
             </div>
           </div>
        </div>
      </div>
      <div class="ctx-footer">
        <div class="footer-floor">
          <div class="floor-name"></div>
           <!-- <div class="floor-name">{{ name.address }}</div> -->
          <div v-if="showbigscreen==true" style="width:300px;display:flex;height:30px;">
            <span style="flex: 1;color: #69d3da;line-height: 30px;">选择楼层</span><x-select style="flex:2" @selectItem="selectItem" :name="unitTypeName||selectList[0].enumName" :listItem="selectList" />
          </div>

          <div v-if="floor.length >= 0 && showbigscreen==false" v-for="(item, index) in floor" class="floor-list">
              <!-- showbigscreen==false 小于7户 -->
                <div  class="list-name" >{{ item.resultname }}</div>
                <div
                  @click="showPeople(item1)"
                  v-for="(item1, index1) in item.itmes"
                  class="list-rs"
                  style="position: relative;"
                >
                  <div style="position:absolute;right:0;top:0;" v-if="item1.isolate=='1'">
                      <img :src="icongeli" alt="">
                    </div>
                  <div style="display:flex;align-items:center'">

                    <div style="width:26px;height:26px;">
                      <img v-if="item1.usage=='群租'" :src="iconqunzu" alt="">
                      <img v-if="item1.usage=='出租'" :src="iconchuzu" alt="">
                      <img v-if="item1.usage=='自住'" :src="iconzizhu" alt="">
                      <img v-if="item1.usage=='空置'" :src="iconkongzhi" alt="">
                    </div>
                    <div style="height:26px;line-height:32px;margin-left:9px;">{{ item1.roomName.replace('室','') }}</div>
                  </div>
                </div>

          </div>
           <div v-if="floor.length >= 0 && showbigscreen==true"  class="floor-list" style="flex-wrap:wrap">
<!-- showbigscreen==true 大于7户 -->

                <div
                  v-if="showbigscreen==true"
                  @click="showPeople(item1)"
                  v-for="(item1, index1) in unitTypeList"
                  class="list-rs"
                  style="position: relative;margin-top:20px;"
                >
                  <div style="position:absolute;right:0;top:0;" v-if="item1.isolate=='1'">
                      <img :src="icongeli" alt="">
                    </div>
                  <div style="display:flex;align-items:center'">

                    <div style="width:26px;height:26px;">
                      <img v-if="item1.usage=='群租'" :src="iconqunzu" alt="">
                      <img v-if="item1.usage=='出租'" :src="iconchuzu" alt="">
                      <img v-if="item1.usage=='自住'" :src="iconzizhu" alt="">
                      <img v-if="item1.usage=='空置'" :src="iconkongzhi" alt="">
                    </div>
                    <div style="height:26px;line-height:32px;margin-left:9px;">{{ item1.roomName.replace('室','') }}</div>
                  </div>
                </div>

            </div>
        </div>
        <div class="footer-unit">
          <div class="unit-header"></div>
          <div class="unit-list">
            <div class="list-title">
              {{ roomName }}
              <!-- <span v-if="roomName">({{ roomPresented }})</span> -->
            </div>
            <ul class="list-ul">
              <li class="list-li">
                <div class="item-no">序号</div>
                <div class="li-name">姓名</div>
                <div class="li-sex">性别</div>
                <div class="li-age">年龄</div>
                <!-- <div class="li-phone">身份证</div> -->
                <div class="li-phone">联系电话</div>
                <div class="li-phone">是否在家</div>
              </li>
              <li
                @click="showDetail()"
                v-if="peoples.length >= 0"
                v-for="(item, index) in peoples"
                class="list-li"
              >
                <div class="item-no">{{ index + 1 }}</div>
                <div class="li-name">{{ item.userName }}</div>
                <div class="li-sex">{{ item.sex }}</div>
                <div class="li-age">{{ item.age>100?'':(item.age<1?'':item.age) }}</div>
                <!-- <div :alt="item.idNum" :title="item.idNum" class="li-phone">{{ item.idNum }}</div> -->
                <div :alt="item.phone" :title="item.phone" class="li-phone">{{ item.phone }}</div>
                <div class="li-phone">{{item.inPlot=='1'?'是':'否'}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div
      v-if="isShowCtx == '2'"
      class="house-ctx page2"
      :style="{ 'background-image': `url(${modelBg})` }"
    >
      <div class="ctx-title">{{ roomName }}</div>

      <span @click="isShowCtx = '1'" style="float:right" class="back">
        <img src="../../assets/images/icon/return.png" alt />
      </span>

      <div class="footer-floor name">
        <span>{{ name.name }}</span>
        <!-- <ul class="choose">
          <li @click="isShowCtx = '2'" class="active">相关人员</li>
          <li @click="showhu()">户型图</li>
        </ul> -->
      </div>

      <div style="display:flex;">
        <!-- 户型 -->
        <div style="flex:1">
          <div
        class="left_text"
        style="width:200px;z-index: 999;color: #fff;top: 68px;text-align:left;margin:20px 0"
      >
        <div>面积：{{ area }}&nbsp;&nbsp;平方米</div>
        <div>户型：{{ huxing }}</div>
      </div>
      <div style="width:80%;margin:10px auto">
        <img v-show="hu == 2" :src="roomImg" alt />
      </div>


        </div>

            <!-- 列表 -->
            <div class="footer-unit" style="flex:1">
              <div class="unit-header"></div>
              <div class="unit-list">
                <ul class="list-ul">
                  <li class="list-li">
                    <div class="item-no">序号</div>
                    <div class="li-name">姓名</div>
                    <div class="li-sex">性别</div>
                    <div class="li-age">年龄</div>
                     <div class="li-age">房间号</div>
                    <div class="li-phone">身份证号</div>
                    <div class="li-phone">联系电话</div>
                    <!-- <div class="li-phone">操作</div> -->
                  </li>
                  <li
                    @click="showPeopleDetail(index, item)"
                    v-if="peoples.length >= 0"
                    v-for="(item, index) in peoples"
                    class="list-li"
                  >
                    <div class="item-no">{{ index + 1 }}</div>
                    <div class="li-name">{{ item.userName }}</div>
                    <div class="li-sex">{{ item.sex }}</div>
                    <div class="li-age">{{ item.age }}</div>
                    <div class="li-age">{{item.roomNo}}</div>
                    <div :alt="item.idNum" :title="item.idNum" class="li-phone">{{ item.idNum }}</div>
                    <div :alt="item.phone" :title="item.phone" class="li-phone">{{ item.phone }}</div>
                    <!-- <div class="li-phone button-color">查看</div> -->
                  </li>
                </ul>
              </div>
            </div>







      </div>

    </div>

    <div
      v-if="isShowCtx == '3'"
      class="house-ctx page2 text-left"
      :style="{ 'background-image': `url(${modelBg})` }"
    >
      <div class="ctx-title">{{ roomName }}</div>

      <!-- 一人一档 -->
      <x-dangan :id="people.idCarNum" v-if="isShowCtx == '3'" @changedangan="changedangan"></x-dangan>
    </div>

    <div
      v-if="isShowCtx == '4'"
      class="house-ctx page2"
      :style="{ 'background-image': `url(${modelBg})` }"
    >
      <div class="ctx-title">{{ roomName }}</div>

      <span @click="isShowCtx = '2'" style="float:right" class="back">
        <img src="../../assets/images/icon/return.png" alt />
      </span>

      <div class="footer-floor name">
        {{ name.name }}
        <ul class="choose">
          <li @click="isShowCtx = '2'">相关人员</li>
          <li class="active" @click="showhu()">户型图</li>
        </ul>
      </div>
      <div
        class="left_text"
        style="width:200px;position: relative;z-index: 999;color: #fff;top: 68px;text-align:left;"
      >
        <div>面积：{{ area }}&nbsp;&nbsp;平方米</div>
        <div>户型：{{ huxing }}</div>
      </div>

      <img v-show="hu == 2" :src="roomImg" alt />
      <img v-show="hu == 3" :src="roomImg" alt />
    </div>


     <div
      v-if="isShowCtx == '5'"
      class="house-ctx page2"
      :style="{ 'background-image': `url(${modelBg})` }"
    >
      <div class="ctx-title">{{ name.name }}</div>
       <span @click="isShowCtx = '1'" style="float:right" class="back">
        <img src="../../assets/images/icon/return.png" alt />
      </span>
      <div class="info-table" v-if="status=='menjin'">
            <div class="table-rs">
              <ul class="table-list">
                <li class="list-item">
                  <!-- <div class="item-pic">单位类型</div> -->
                  <div class="item-no">序号</div>
                  <div class="item-pic">图片</div>
                  <div class="item-type">姓名</div>
                  <div class="item-name">证件号</div>
                  <div class="item-time">时间</div>
                </li>
                <li v-for="(item, i) in menjinList" :key="item.id" class="list-item1">
                  <div class="item-no">{{ i + 1 + 10 * (pageNum - 1) }}</div>
                  <!-- <div class="item-pic"></div> -->
                  <div class="item-pic" style="height: 100px;display:flex;align-items: center;cursor: pointer;" @click="picshow(item.pic)">
                    <img class="pic" :src="item.pic |filterimgsrc" style="width: 100%;" />
                  </div>
                  <div class="item-type">{{ item.name }}</div>
                  <div class="item-name" style="cursor:pointer;" >{{ new String().hideidCard(item.idNum) }}</div>
                  <div class="item-time">{{ new Date().dateFtt(item.eventTime) }}</div>
                </li>
              </ul>
            </div>
            <div v-if="allpage > 0" class="table-footer">
              <x-page @currentChange="currentChange" :currentPage="pageNum" :page-size="5" :allpage="allpage" :total-num="false" />
            </div>
      </div>
      <div class="info-table" v-if="status=='renlian'">
            <div class="table-rs">
              <ul class="table-list">
                <li class="list-item">
                  <!-- <div class="item-pic">单位类型</div> -->
                  <div class="item-no">序号</div>
                  <div class="item-pic">图片</div>
                  <div class="item-type">姓名</div>
                  <!-- <div class="item-name">证件号</div> -->
                  <div class="item-time">时间</div>
                </li>
                <li v-for="(item, i) in renlianList" :key="item.id" class="list-item1">
                  <div class="item-no">{{ i + 1 + 10 * (pageNum - 1) }}</div>
                  <!-- <div class="item-pic"></div> -->
                  <div class="item-pic" style="height: 100px;display:flex;align-items: center;cursor: pointer;" @click="picshow(item.pic1)">
                    <img class="pic" :src="item.pic1 |filterimgsrc" style="width: 100%;" />
                  </div>
                  <div class="item-type">{{ item.name }}</div>
                  <!-- <div class="item-name" style="cursor:pointer;" >{{ new String().hideidCard(item.idNum) }}</div> -->
                  <div class="item-time">{{ new Date().dateFtt(item.startTime) }}</div>
                </li>
              </ul>
            </div>
            <div v-if="allpage > 0" class="table-footer">
              <x-page @currentChange="currentChange" :currentPage="pageNum" :page-size="5" :allpage="allpage" :total-num="false" />
            </div>
      </div>
      	<el-dialog :visible.sync="dialogVisible" v-if="dialogVisible" v-dialogDrag class="jk-dialog" width="50%">
			<div style="width:786px;height:432px;margin:auto">
				<img :src="picurl |filterimgsrc" alt style="height:100%" />
			</div>
		</el-dialog>
    </div>
  </div>
</template>
<script>
import XPie from "@/components/xpie";
import XPage from '@/components/xpage'
import rommJson from "../../../static/buildlayout";
import XDangan from "@/components/xdanganmodel";
import XSelect from '@/components/xselect'
import {
  getPersonInfo,
  GetFloorInfo,
  GetPeopleListForRomm,
  getGatedByUnitId,
  getUnitGatedByUnitId
} from "@/api/peopleApi";
export default {
  name: "xfloormodel",
  props: {
    name: {
      type: Object
    },
    id: {
      type: [String, Number]
    },
    code:{
      type:String
    }
  },
  data() {
    return {
      roomImg: "",
      rommJson: rommJson,
      room: {},
      people: {},
      tabbarIndex: 0,
      modelBg: require("@/assets/images/modelBg.png"),
      isShowCtx: "1",
      deviceH: 0,
      ageSum: {},
      peoples: [],
      personInfo: [],
      roomName: "",
      roomPresented: "",
      hu: 2,
      area: "",
      huxing: "",
      iconqunzu:require('@/assets/images/iconqunzu.png'),
      iconchuzu:require('@/assets/images/iconchuzu.png'),
      iconzizhu:require('@/assets/images/iconzizhu.png'),
      iconkongzhi:require('@/assets/images/iconkongzhi.png'),
      icongeli:require('@/assets/images/icongeli.png'),
      showbigscreen:false,
      selectList:[],
      unitTypeName:'',
      unitTypeList:[],
      pageNum:1,
      menjinList:[],
      allpage:0,
      renlianList:[],
      status:'',
      dialogVisible:false,
      picurl:''
    };
  },
  components: {
    XPie,
    XDangan,
    XSelect,
    XPage
  },
  beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;
  },
  mounted() {
    this.GetFloorData();
  },
  methods: {
    picshow(url){
      console.log(url)
      this.picurl=url;
      this.dialogVisible=true
    },
    showDetail(){
      this.isShowCtx = '2';
      this.showhu()
    },
    currentChange(n){
      this.pageNum=n
      this.showwulian(this.status)
    },
   async showwulian(name){
     if(name!=this.status){
        this.status=name
        this.pageNum=1
     }

      let arg={
        unitId:this.name.buildnum,
        placeId:this.code,
        pageSize:10,
        pageNum:this.pageNum
      }
      console.log(arg)
      if(name=="menjin"){
       let res=await getGatedByUnitId(arg)
       let total = res.total

        this.allpage = Math.ceil(total / parseInt(10))
        console.log(this.allpage)
        this.menjinList = res.list
        this.isShowCtx='5'
      }
      if(name=='renlian'){
        let res=await getUnitGatedByUnitId(arg)
        let total = res.total

        this.allpage = Math.ceil(total / parseInt(10))
        console.log(this.allpage)
        this.renlianList = res.list
        this.isShowCtx='5'
      }
    },
    showhu() {
      console.log(this.rommJson);
      // this.isShowCtx = "4";
      var hao = this.name.buildnum;
      console.log(this.name.buildnum);
      var shi = (parseInt(this.room.roomName) + "").substr(
        (parseInt(this.room.roomName) + "").length - 1,
        1
      );
      this.rommJson.forEach(element => {
        if (element.buildingno == hao && element.roomno == shi) {
          console.log(element);
          this.roomImg = require("../../assets/images/" +
            element.code +
            ".png");
          this.area = element.area;
          this.huxing = element.layout;
        }
      });
      // if (
      //   hao == 1 &&
      //   hao == 8 &&
      //   hao == 9 &&
      //   hao == 15 &&
      //   hao == 16 &&
      //   hao == 22
      // ) {
      //   this.hu = 2;
      // } else {
      //   if (shi == 1 && shi == 4) {
      //     this.hu = 3;
      //   } else {
      //     this.hu = 2;
      //   }
      // }
    },
    async showPeopleDetail(index, item) {
      console.log(index, item);
      let data = {
        idNum: item.idCarNum
      };
      const res = await getPersonInfo(data);
      this.personInfo = res;
      console.log(res);
      this.people = this.peoples[index];
      this.isShowCtx = "3";
    },
    changedangan() {
      this.isShowCtx = "2";
    },
    showTab(index) {
      this.tabbarIndex = index;
      document.querySelector(".active").className = "";
      document.querySelectorAll(".tabbar li")[index].className = "acitve";
    },
    async showPeople(item) {
      try {
        const res = await GetPeopleListForRomm(item.id);
        this.roomName = item.roomName;
        this.roomPresented = item.presented;
        this.peoples = res;
        this.room = item;
        console.log("-=-=-=-==-===12312");
        console.log(this.room);
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
      console.log("=_+_+_+");
      console.log(item);
    },
    async GetFloorData() {
      try {
        const res = await GetFloorInfo(this.id);
        console.log(res)

        let arr=res[0].itmes;
        let arr1=[]
        arr.map(item=>{
            if(item.name=="70岁以上"){
              arr1[0]=item
            }
            if(item.name=="56-70"){
              arr1[1]=item
            }
            if(item.name=="36-55"){
              arr1[2]=item
            }
            if(item.name=="21-35"){
              arr1[3]=item
            }
            if(item.name=="5-20"){
              arr1[4]=item
            }
            if(item.name=="5岁以下"){
              arr1[5]=item
            }
        })
        res[0].itmes=arr1
        this.ageSum = res[0];

        this.liveSun = res[1];
        console.log("---floor----");
        this.floor = res[2].itmes;
        this.floor.map(item=>{
          if(item.itmes.length>6){
            this.showbigscreen=true
          }
        })
        if(this.showbigscreen==true){

          this.floor.map(item=>{
            this.selectList.push({
               enumName: item.resultname,
               id: item.itmes,
              //  items:item.items
            })
          })
          this.unitTypeList=this.floor[0].itmes;
        }
        console.log(this.floor);
        this.isShowCtx = true;
      } catch (error) {
        this.$message({
          type: "error",
          message: error
        });
      }
    },
    closeMask() {
      this.$emit("closeMask");
    },
     //选择下拉框
    selectItem (name, id) {
      this.unitTypeName = name
      console.log(id)
      this.unitTypeList=id
    },
  }
};
</script>
<style lang="less" scoped>
  .list-ul {
            width: 100%;
            padding-left: 0;
            height: clac(100% - 25px);
            margin-top: 15px;
            overflow-y: auto;
            list-style: none;

            .list-li:nth-child(even) {
              background-color: #06121d;
            }

            .list-li {
              cursor: pointer;
              width: 100%;
              height: 36px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #ffffff;
              line-height: 36px;

              .item-no {
                width: 30%;

                box-sizing: border-box;
              }

              .li-name {
                width: 50%;

                box-sizing: border-box;
              }

              .li-sex {
                width: 40%;

                box-sizing: border-box;
              }

              .li-age {
                width: 40%;

                box-sizing: border-box;
              }

              .li-phone {
                box-sizing: border-box;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
.x-house {

  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1000;

  .text-left.page2 {
    text-align: left;
  }

  .page2 {
    .unit-list {
      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .back {
      float: right;
      position: absolute;
      right: 60px;
      width: 0px;
      top: 30px;
      cursor: pointer;

      img {
        width: 30px;
        height: 30px;
      }
    }

    .tabbar {
      padding: 0;
      margin: 0;
      list-style: none;
      text-align: left;
      text-align: left;
      margin-top: 20px;

      .tabbarContent {
        & > li,
        & > ul {
          padding: 0;
          margin: 0;
          list-style: none;
          color: #fff;
        }

        li {
          width: 33%;
          display: inline-block;
          padding-top: 10px;
          padding-bottom: 10px;

          span {
            width: 40%;
            display: inline-block;
          }
        }
      }

      & > li {
        display: inline-block;
        padding: 5px;
        border-radius: 4px;
        background: #0f0f2b;
        font-size: 16px;
        color: #fff;
      }

      .list-li:nth-child(even) {
        background-color: #06121d;
      }
    }

    .tabbar .active {
      background: #3f8aff;
      color: #fff;
    }

    .name {
      width: 100%;
      text-align: left;
      font-family: PingFangSC-Medium;
      font-size: 18px;
      color: #69d3da;
      letter-spacing: 0;
      overflow: hidden;
      white-space: nowrap;
      word-break: normal;
      text-overflow: ellipsis;
      margin-top: 20px;

      & > span {
        line-height: 2;
      }
    }

    .choose {
      float: right;
      padding: 0;
      margin: 0;
      position: relative;
      top: 0;
    }

    .choose ul,
    .choose li {
      list-style: none;
      display: inline-block;
    }

    .choose li {
      padding: 8px;
      border-radius: 4px;
      background: #0f0f2b;
      cursor: pointer;
    }

    .choose .active {
      background: #3f8aff;
      color: #fff;
    }

    .car-li {
      flex-wrap: wrap;

      .carDetail {
        display: flex;
        align-items: center;
        flex-grow: 1;
        width: 100% !important;

        & > div {
          width: 20%;

          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      & > div {
        width: 20% !important;
      }
    }

    .list-li {
      cursor: pointer;
      width: 100%;
      height: 36px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #ffffff;
      line-height: 36px;

      & > div {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 22px;
        // width: 100%;
      }

      & > .button-color {
        color: #3f8aff;
      }
    }
  }

  .house-ctx::-webkit-scrollbar {
    width: 0px;
    height: 16px;
    background-color: #ccc;
  }

  .house-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    overflow-y: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;

    .ctx-title {
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      margin-top: 10px;
      letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }

    .ctx-info {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 28px;

      .info-item {
        flex: 1;
        height: 200px;

        .item-rs {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .rs-content {
            width: 50%;
            height: 100%;

            .content-name {
              width: 100%;
              font-family: PingFangSC-Medium;
              font-size: 18px;
              color: #69d3da;
              letter-spacing: 0;
              text-align: left;

              .iconfont {
                font-size: 22px;
                margin-right: 8px;
              }
            }

            .content-number {
              font-family: Silom;
              font-size: 40px;
              margin-top: 18px;
              text-align: left;
              color: #d0b01c;
              letter-spacing: 2.22px;
              line-height: 40px;

              .unit {
                font-family: PingFangSC-Medium;
                font-size: 18px;
                color: #69d3da;
                letter-spacing: 0;
              }
            }
          }
        }

        .item-name {
          width: 100%;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          text-align: left;

          .iconfont {
            font-size: 22px;
            margin-right: 8px;
          }
        }

        .item-number {
          margin-top: 20px;
          font-family: Silom;
          font-size: 40px;
          color: #d0b01c;
          letter-spacing: 2.22px;
          text-align: left;
        }

        .item-pie {
          width: 100%;
          height: 140px;
          margin-top: 10px;
          padding: 5px 0px;
          box-sizing: border-box;

          .pie-canvas {
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    .ctx-footer {
      width: 100%;
      margin-top: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;

      .footer-floor::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }

      .footer-floor {
        flex: 4;
        height: 445px;
        overflow-y: auto;

          .floor-name {
          width: 100%;
          text-align: left;
          font-family: PingFangSC-Medium;
          font-size: 18px;
          color: #69d3da;
          letter-spacing: 0;
          overflow: hidden;
          white-space: nowrap;
          word-break: normal;
          text-overflow: ellipsis;
        }

        .floor-list {
          width: 100%;
          height: clac(100% - 25px);
          overflow-y: auto;
          margin-top: 20px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          // padding-right: 20px;

          .list-name {
            width: 55px;
            text-align: left;
            font-family: PingFangSC-Regular;
            font-size: 16px;
            color: #e9e9e9;
            min-width: 55px;
          }

          .kongzhi {
            background-color: #474747;
          }

          .qunzu {
            background-color: #ca504b;
          }

          .zizhu {
            background-color: #336298;
          }

          .chuzu {
            background-color: #c1812d;
          }

          .list-rs {
            //width: calc(100% - 55px);
            cursor: pointer;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            margin: 10px;
            margin-top: 0;
            margin-bottom: 0;
            width:110px;
            background: #132435;
            justify-content: center;
            height: 48px;
            font-family: ArialMT;
            font-size: 16px;
            color: #E9E9E9;
            img{
              width: 100%;
              height: 100%;
            }

            .rs-item {
              width: 60px;
              height: 25px;
              text-align: center;
              line-height: 25px;
              font-family: PingFangSC-Regular;
              font-size: 16px;
              color: #e9e9e9;
              text-align: center;
              cursor: pointer;

              &.item-empty {
                background: #474747;
              }

              &.item-self {
                background: #21629c;
              }

              &.item-rent {
                background: #cc7f01;
              }

              &.item-other {
                background: #da4545;
              }
            }
          }
        }
      }



      .footer-unit::-webkit-scrollbar {
        width: 0px;
        height: 16px;
        background-color: #ccc;
      }
      .floor-list::-webkit-scrollbar {
        width: 5px;
        height: 8px;
        background-color: #ccc;
      }

      .footer-unit {
        flex: 3;
        height: 450px;
        overflow-y: auto;

        .unit-header {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;

          .header-btn {
            width: 60px;
            height: 32px;
            background: #102c45;
            margin-right: 3px;
            line-height: 32px;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 0;
            text-align: center;

            &:first-child {
              border-top-left-radius: 4px;
              border-bottom-left-radius: 4px;
            }

            &:last-child {
              border-top-right-radius: 4px;
              border-bottom-right-radius: 4px;
              margin-right: 0;
            }

            &.active {
              background: #209cff;
            }
          }
        }

        .unit-list {
          width: 100%;
          height: clac(100% - 25px);

          margin-top: 30px;

          .list-title {
            font-family: PingFangSC-Semibold;
            font-size: 16px;
            color: #ffffff;
            text-align: center;
            line-height: 22px;
          }

          .list-ul {
            width: 100%;
            padding-left: 0;
            height: clac(100% - 25px);
            margin-top: 15px;
            overflow-y: auto;
            list-style: none;

            .list-li:nth-child(even) {
              background-color: #06121d;
            }

            .list-li {
              cursor: pointer;
              width: 100%;
              height: 36px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              color: #ffffff;
              line-height: 36px;

              .item-no {
                width: 30%;

                box-sizing: border-box;
              }

              .li-name {
                width: 50%;

                box-sizing: border-box;
              }

              .li-sex {
                width: 40%;

                box-sizing: border-box;
              }

              .li-age {
                width: 40%;

                box-sizing: border-box;
              }

              .li-phone {
                box-sizing: border-box;
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
}
div>img{
  width:100%
}
.info_icon{
  display: flex;
  justify-content: space-around;
  padding-top:30px;
  cursor: pointer;

  div{
    font-size: 14px;
    color: #E9E9E9;
    letter-spacing: 0;
    text-align: center;
    .img{
    width: 52px;
    }
  }

}



.info-table {
					flex: 3;
					height: 659px;
					padding-left: 40px;
					box-sizing: border-box;

					.table-rs {
						width: 100%;
						height: 562px;
						overflow-y: auto;

						.table-header {
							width: 100%;
							height: 40px;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.header-kong {
								width: 186px;
								height: 100%;
								border: none;
								outline: none;
								// background: #06121d;
								border: 1px solid rgba(62, 178, 215, 0);
								border-radius: 4px;
								font-size: 14px;
								color: #fff;
								padding: 0 14px;
								box-sizing: border-box;
							}

							.header-item {
								width: 186px;
								height: 100%;
								border: none;
								outline: none;
								background: #06121d;
								border: 1px solid rgba(62, 178, 215, 0);
								border-radius: 4px;
								font-size: 14px;
								color: #fff;
								padding: 0 14px;
								box-sizing: border-box;

								.input {
									font-size: 14px;
									color: #fff;
									width: 100%;
									height: 100%;
									border: none;
									outline: none;
									background: transparent;
								}
							}

							.header-select {
								width: 100%;
								margin-left: 20px;
								height: 100%;
							}

							.header-more {
								width: 56px;
								margin-left: 20px;
								font-family: PingFangSC-Regular;
								font-size: 14px;
								color: #72edf5;
								line-height: 28px;
								text-decoration: underline;
							}

							.header-btn {
								width: 66px;
								height: 100%;
								background: #72edf5;
								border-radius: 4px;
								text-align: center;
								line-height: 36px;
								font-family: PingFangSC-Regular;
								font-size: 14px;
								color: #000000;
							}
						}

						.table-list {
							width: 100%;
							list-style: none;
							padding: 0;
							margin-top: 15px;

							.list-item {
								padding: 0;
								margin: 0;
								list-style: none;
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								height: 36px;

								&:nth-of-type(2n + 1) {
									background: #06121d;
								}

								&:nth-of-type(2n) {
									background: transparent;
								}

								.item-no {
									width: 50px;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
									text-align: center;
								}

								.item-pic {
									width: 120px;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
									text-align: center;
								}

								.item-name {
									width: 158px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
									cursor: pointer;
								}

								.item-time {
									width: 258px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
								}

								.item-type {
									width: 116px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
								}

								.item-phone {
									width: 125px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
								}

								.item-people {
									width: 116px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
								}

								.item-cardid {
									width: 194px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 36px;
								}
							}

							.list-item1 {
								padding: 0;
								margin: 0;
								list-style: none;
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								height: 100px;

								&:nth-of-type(2n + 1) {
									background: #06121d;
								}

								&:nth-of-type(2n) {
									background: transparent;
								}

								.item-no {
									width: 50px;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
									text-align: center;
								}

								.item-pic {
									width: 120px;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
									text-align: center;

									div {
										line-height: 100px;
									}
								}

								.item-name {
									width: 158px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-time {
									width: 258px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-type {
									width: 116px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-phone {
									width: 125px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-people {
									width: 116px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 100px;
								}

								.item-cardid {
									width: 194px;
									text-align: left;
									height: 100%;
									font-family: PingFangSC-Regular;
									font-size: 14px;
									color: #ffffff;
									line-height: 60px;
								}
							}
						}
					}

					.table-footer {
						width: 100%;
						// padding-top: 60px;
						box-sizing: border-box;
						display: flex;
						justify-content: flex-end;
					}
        }
        	body::-webkit-scrollbar {
		display: none;
	}

	.table-rs::-webkit-scrollbar {
		display: none;
	}
</style>
<style scoped>
.left_text {
}
</style>
